<!-- 分享卡片功能 -->
<!-- 豆包的实现，挺不错的：https://www.doubao.com/chat/17378954583259138 -->
<template>
  <view class="container">
    <view class="card">
      <view class="title">分享卡片 Demo</view>
      <view class="desc">点击下方按钮，将邀请信息分享给好友或群聊。</view>
      <view class="info">
        您的邀请码：
        <text class="code">{{ inviteCode }}</text>
      </view>

      <view class="actions">
        <!-- 微信/uni-app：open-type="share" 触发 onShareAppMessage -->
        <button class="share-btn" type="primary" open-type="share">分享给好友</button>

        <!-- 备用：复制页面路径+参数，便于手动转发 -->
        <button class="copy-btn" @click="copyInviteLink">复制邀请链接</button>
      </view>
    </view>
  </view>
  
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'

const inviteCode = ref("INV-" + Date.now().toString().slice(-6))

onLoad((options) => {
  if (options && options.inviteCode) {
    inviteCode.value = options.inviteCode
  }
})

const shareImageUrl = computed(() => {
  // return "https://dummyimage.com/800x640/1890ff/ffffff&text=%E9%82%80%E8%AF%B7%E5%8D%A1%E7%89%87"
  return "@/static/logo.png"
})

onShareAppMessage(() => {
  const path = `/pages/testpage/testpage/test19?inviteCode=${inviteCode.value}`
  return {
    title: `邀请你一起体验小程序（邀请码：${inviteCode.value}）`,
    path,
    imageUrl: shareImageUrl.value
  }
})

onShareTimeline(() => {
  return {
    title: "邀请你一起体验小程序",
    query: `inviteCode=${inviteCode.value}`,
    imageUrl: shareImageUrl.value
  }
})

const copyInviteLink = () => {
  const url = `/pages/testpage/testpage/test19?inviteCode=${inviteCode.value}`
  uni.setClipboardData({
    data: url,
    success: () => {
      uni.showToast({ title: "链接已复制", icon: "success" })
    }
  })
}
</script>

<style scoped>
.container {
  padding: 24rpx;
}

.card {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.06);
}

.title {
  font-size: 34rpx;
  font-weight: 600;
  color: #111;
}

.desc {
  margin-top: 12rpx;
  font-size: 26rpx;
  color: #666;
}

.info {
  margin-top: 24rpx;
  font-size: 28rpx;
  color: #333;
}

.code {
  color: #1677ff;
  font-weight: 600;
}

.actions {
  margin-top: 32rpx;
  display: flex;
  gap: 16rpx;
}

.share-btn {
  flex: 1;
  background-color: #1677ff;
  color: #fff;
}

.copy-btn {
  flex: 1;
}
</style>